<template>
  <div>
    <el-col :xs="24" :sm="24" :lg="24">

      <div style="text-align: right; margin-bottom: 20px;">
        <el-button
          :loading="downloadLoading"
          class="filter-item"
          type="primary"
          icon="el-icon-download"
          @click="handleDownload"
        >
          Export
        </el-button>
      </div>
      <el-table
        v-loading="listLoading"
        :data="tableData.slice((currentPage-1)*pagesize,currentPage*pagesize)"
        element-loading-text="正在查询中。。。"
        :cell-class-name="addClass"
        @cell-click="cellDbClick"
        :header-cell-class-name="headerClassNmae"
      >
        <el-table-column
          v-for="(item, index) in gridTableHeader"
          :key="index"
          :prop="index"
          :label="item"
          sortable
          show-overflow-tooltip
        />
      </el-table>
      <div style="text-align: right; margin-top: 20px;">
        <el-pagination
          :current-page="currentPage"
          :page-sizes="[5,10, 20, 50, 100]"
          :page-size="pagesize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="tableData.length"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </el-col>
  </div>
</template>

<script>
export default {
  props: {
    gridTableHeader: {
      type: Object, default: () => {
      }
    },
    tableData: { type: Array, default: () => [] },
    clikcCell: { type: Array, default: () => [] }, // ['market_value', 'delta_pnl', 'account_name']
    showRedGreenColumn: { type: Array, default: () => [] }, // ['market_value', 'delta_pnl']
    showAbsoluteVlue: { type: String, default: '{}' } // 传值格式： '{"market_value":99999999999,"delta_fee":"157950"}'
  },
  data() {
    return {
      listLoading: false,
      downloadLoading: false,
      currentPage: 1,
      pagesize: 20,
      absoluteVlue: {},
      deepHead: []
    }
  },
  created() {
    this.absoluteVlue = JSON.parse(this.showAbsoluteVlue)
  },
  methods: {
    headerClassNmae({ row, column, rowIndex, columnIndex }) {
      // console.log(column)
      if (this.deepHead.indexOf(column.property) >= 0) {
        return 'deepColor'
      }
      return ''
    },
    addClass({ row, column, rowIndex, columnIndex }) {
      // if (this.clikcCell.indexOf(column.property) >= 0) {
      let cls = ''
      if (this.showRedGreenColumn.indexOf(column.property) >= 0) {
        if (row[column.property] > 0) {
          cls = 'red'
        } else {
          cls = 'green'
        }
      }
      if (this.clikcCell.indexOf(column.property) >= 0) {
        cls = cls + ' cellClass'
      }
      if (column.property in this.absoluteVlue) {
        if (Math.abs(row[column.property]) > Math.abs(this.absoluteVlue[column.property])) {
          cls = cls + ' deepBackground'
          if (this.deepHead.indexOf(column.property) < 0) {
            this.deepHead.push(column.property)
          }
          // console.log(this.deepHead)
        }
      }
      // console.log(this.absoluteVlue)

      return cls
    },
    handleSizeChange(size) {
      this.pagesize = size
    },
    handleCurrentChange(currentPage) {
      this.currentPage = currentPage
    },
    rowclik(row, column, event) {
      // console.log(row)
      this.$emit('rowClick', row)
    },
    cellDbClick(row, column, cell, event) {
      if (this.clikcCell.indexOf(column.property) >= 0) {
        // this.$message({
        //   message: '该行可以跳转',
        //   type: 'success'
        // })
        this.$emit('cellOnClick', row, column, cell, event)
      }
    },
    /** export table data */
    handleDownload() {
      if (this.tableData.length === 0) {
        [
          this.$notify({
            title: 'error',
            message: 'table is empty'
          })
        ]
        return
      }
      this.downloadLoading = true

      import('@/utils/Export2Excel').then(excel => {
        const tHeader = []
        const filterVal = []
        for (const key in this.gridTableHeader) {
          tHeader.push(key)
          filterVal.push(key)
        }

        const data = this.formatJson(filterVal)
        excel.export_json_to_excel({
          header: tHeader,
          data,
          filename: 'table-list' + new Date().getTime()
        })
        this.downloadLoading = false
      })
    },

    formatJson(filterVal) {
      return this.tableData.map(v => filterVal.map(j => {
        return v[j]
      }))
    }

  }
}
</script>

<style>
.cellClass {
  color: blue;
  text-decoration: underline;
}

.red {
  color: red;
}

.deepBackground {
  background: #FEC171;
}

.deepColor {
  color: #FEC171;
}

.green {
  color: green;
}
</style>
